<template>
	<view class="goods-detail">
		<view class="layout-wrap">
			
			<!-- swiper轮播 -->
			<view class="swiper-banner page-section swiper mb-20">
				<view class="page-section-spacing">
					<swiper class="swiper" 
					:autoplay="swiperConfig.autoplay" 
					:interval="swiperConfig.interval" 
					:duration="swiperConfig.duration"
					:current="swiperDotCurrent"
					@change="changeSwiper"
					 
					>
						<swiper-item v-for="(i, index) in goodsInfo.imgArr" @tap="ViewImage" :data-idx="index">
							<view class="swiper-item">
								<!-- <image :src="requestUrl+i.url" mode=""></image> -->
								<image :src="i.url" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="numdot" v-if="goodsInfo.imgArr.length != 1">
						{{ swiperDotCurrent+1 }}/{{ goodsInfo.imgArr.length }}
					</view>
				</view>
			</view>
			
			<!-- 商品标题价格销量 -->
			<view class="goods-info cai-layout-box">
				<view class="goods-title">
					{{ goodsInfo.title }}
				</view>
				<view class="goods-sale">
					浏览 ({{ goodsInfo.views }})
				</view>
			</view>
			<!-- 商品介绍 -->
			<view class="goods-introduce cai-layout-box" v-if="goodsInfo.goodsIntro">
				<view class="content box-title">
					商品介绍
				</view>
				<view class="introduce-content">
					{{ goodsInfo.goodsIntro }}
				</view>
			</view>
		</view>
		
		<view class="fixed-bar">
			<view class="shop-call click-feed" @click="clickCallShop">
				<view class="not-friend">
					联系平台客服咨询
				</view>
			</view>
		</view>
		
		<modal
			@clickDefine="defineCall" 
			:defineText="'呼叫'" 
			ref="modal" 
			title="400 800 900" 
			subtitle="平台服务热线"
			titleFontSize="54"
			/>
	</view>
</template>

<script>
import Modal from '@/components/modal/index'
export default {
	components: {
		Modal,
	},
	data() {
		return {
			requestUrl: '',
			swiperConfig: {
				autoplay: true,
				interval: 2000,
				duration: 500,
			},
			swiperDotCurrent: 0,
			query: '',
			goodsInfo: {
				title:'产品标题产品标题产品标题产品标题产品标题产品标题产品标题产品标题产品标',
				views: 454,
				goodsIntro: '的发生大撒地方爱的色放阿斯蒂芬就是打开拉法基啊卡洛斯的风景撒十六分打算发大水撒的发生大撒地方爱的色放阿斯蒂芬就是打开拉法基啊卡洛斯的风景撒十六分打算发大水撒',
				imgArr: [{
					url: '/static/images/pic.png'
				},{
					url: '/static/images/pic.png'
				}]
			},
		}
	},
	mounted() {

	},
	onLoad(url) {
		this.query = url;
	},
	methods: {
		clickCallShop(e) {
			this.$refs.modal.showModal(e);
		},
		// 预览
		ViewImage(e) {
			let previewGoodsImg = [];
			
			for (let var1 in this.goodsInfo.imgArr) {
				previewGoodsImg.push(this.requestUrl+this.goodsInfo.imgArr[var1].url);
			}
			uni.previewImage({
				urls: previewGoodsImg,
				indicator: this.goodsInfo.imgArr.length == 1?'none':'default',
				current: Number(e.currentTarget.dataset.idx),
				fail: function(err) {

				}
			});
		},
		// banner切换
		changeSwiper(e) {
			this.swiperDotCurrent = e.detail.current;
		},
		// 获取商品详情
		getGoodsDetail() {
			getGoodsDetail({
				data: {
					goodsId: this.query.id,
				},
				success: (res)=> {
					this.goodsInfo = res.data.goodsInfo;
				}
			})
		},
		// 拨打客服电话
		defineCall() {
			uni.makePhoneCall({
				phoneNumber: '67675'
			});
			this.$refs.modal.hideModal()
		},
	}
}
</script>

<style lang="scss" scoped>
.goods-detail{
	padding-bottom: 115rpx;
}
.swiper{
	height: 480rpx;
	border-radius: $border-radius-box;
	overflow: hidden;
	position: relative;
	.numdot{
		position: absolute;
		right: 24rpx;
		bottom: 24rpx;
		background-color: #f3f3f3;
		color: #333;
		text-align: center;
		border-radius: 30rpx;
		padding: 12rpx 22rpx;
		font-size: 24rpx;
	}
}
.swiper-item{
	width: 100%;
	height: 480rpx;
}
.goods-info{
	overflow: hidden;
	.goods-sale{
		margin: 0 12rpx;
		margin-bottom: 20rpx;
		color: #999;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
}
.box-title{
	font-weight: bold;
	line-height: 84rpx;
	margin-top: -12rpx;
	font-size: 30rpx;
}
.introduce-content{
	font-size: 29rpx;
	color: #333;
	font-weight: 500;
}
.goods-introduce{
	margin-bottom: 0;
}
.fixed-bar{
	height: 115rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	.shop-call{
		color: #fff;
		border-radius: 50rpx;
		width: 690rpx;
		margin: 0 auto;
		text-align: center;
		height: 98rpx;
		line-height: 98rpx;
		overflow: hidden;
		margin-top: 8rpx;
		background-color: ($cor);
		font-weight: bold;
		font-size: 29rpx;
	}
}

// box
.cai-layout-box{
	background-color: #fff;
	padding: ($padding-box);
	border-radius: ($border-radius-box);
	margin-bottom: ($spacing-row-box);
}
</style>
